<template>
  <div class="radio" >
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div>
        <el-radio v-for="(item, index) in question.options" 
        style="display: block; margin-top:1rem"
        :label="item.index" :model-value="item.isChoosed ? item.index : -1">
          <span style="font-size: 16px; font-weight:bold">{{item.text}}</span>
          <div class="description">{{item.description}}</div>
        </el-radio>
    </div>
    <div v-if="question.qtype == 'exam'">
      <el-alert v-if="isCorrect()"
        :title="'回答正确（+'+question.grade+'分）'"
        type="success"
        :closable="false"
        class="result"
        
        show-icon>
      </el-alert>
      <div v-else>
        <el-alert 
        title="回答错误（+0分）"
        type="error"
        :closable="false"
        class="result"
        show-icon>
        </el-alert>
        <el-alert
          title="正确答案"
          type="success"
          :description="getCorrectAnswer()"
          class="result"
          :closable="false">
        </el-alert>
      </div>    
      <el-alert v-if="question.resolution != '' && question.resolution != null"
        title="答案解析"
        type="info"
        :description="question.resolution"
        class="result"
        :closable="false">
      </el-alert>  
    </div>   
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Radio',
  components: {
    Title,
  },
  data(){
   return {
    //  radio: 0,
   }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
  },
  mounted() {
    // this.getRadio()
  },
  emits: ['changeRadio'],
  methods: {
    select() {
      if(this.question.answer == null){
        this.question.answer = []
        this.question.answer.push(this.radio)
      }else{
        this.question.answer[0] = this.radio
      }
      this.$emit('changeRadio', this.question)
    },
    isCorrect() {
      let correct = true
      for(let option of this.question.options) {
        if(option.isCorrect != option.isChoosed) {
          correct = false
        }
      }
      return correct
    },
    getCorrectAnswer() {
      for(let option of this.question.options) {
        if(option.isCorrect) {
          return option.text
        }
      }
    }
  },
}
</script>

<style scoped src='assets/css/fillcss/radio.css'>
  /* @import url('../css/radio.css'); */
</style>
